<template>
  <div class="about">
    <v-header/>
    <v-sidebar :items="items"/>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <v-tags></v-tags>
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component"/>
            </keep-alive>
          </transition>
        </router-view>
        <!-- <el-backtop target=".content"></el-backtop> -->

      </div>
    </div>
  </div>
</template>
<script>
import vHeader from "../components/Header";
import vSidebar from "../components/Sidebar";
import vTags from "../components/Tags.vue";


export default {
  data() {
    return{
      items: [
        {
          icon: "el-icon-user",
          index: "user",
          title: "用户管理"
        },{
          icon: "el-icon-cpu",
          index: "algorithm",
          title: "算法管理"
        },{
          icon: "el-icon-files",
          index: "feature",
          title: "特征管理"
        },{
          icon: "el-icon-coordinate",
          index: "apply",
          title: "申请管理"
        },

      ]
    }
  },
  components: {
    vHeader,
    vSidebar,
    vTags
  },
  computed: {
    tagsList() {
      return this.$store.state.tagsList.map(item => item.name);
    },
    collapse() {
      return this.$store.state.collapse;
    }
  }
};
</script>
